<template>
	<view class="home-page">
		<view class="top">
			<view class="title">Hello!</view>
			<view class="name">欢迎登录我的图库平台</view>
		</view>
		<view class="center">
			<view class="input-box">
				<view class="box-eye">
					<input class="weui-input" placeholder="请输入手机号" @input="clearInput" v-model="telOrEmail"
						@blur="validateInput" />
					<u-icon name="close-circle-fill" size="20" v-if="showClearIcon" @click="clearIconUser"></u-icon>
				</view>
				<view v-if="inputError" class="error">{{ inputError }}</view>
			</view>
			<view class="input-box">
				<view class="box-eye">
					<input class="weui-input" placeholder="请输入您的密码" @input="clearPass" :password="passwordType"
						v-model="password" @blur="validatePassword" />
					<view class="funBox">
						<u-icon v-if="password" :name="showPassword ? 'eye-fill' : 'eye-off'" size="26"
							@click="togglePasswordVisibility"></u-icon>
						<u-icon style="margin-left: 6rpx;" name="close-circle-fill" size="20" v-if="showPassIcon"
							@click="clearPassWord"></u-icon>
					</view>
				</view>
				<view v-if="passwordError" class="error">{{ passwordError }}</view>
			</view>
		</view>
		<view class="buttomBgc" @click="bandLogin">登录</view>
	</view>
</template>

<script>
	import {
		sendRequest,
	} from "@/utils/quest.js";

	export default {

		data() {
			return {
				telOrEmail: '',
				password: '',
				inputError: '',
				passwordError: '',
				vercode: '',
				verCodeError: '',
				showPassword: false,
				showClearIcon: false,
				showPassIcon: false,
			}
		},
		onLoad() {},
		computed: {
			passwordType() {
				return this.showPassword ? false : true;
			},
		},
		methods: {
			validateInput() {
				this.inputError = '';
				if (!this.telOrEmail) {
					this.inputError = '手机号不能为空';
				} else if (this.telOrEmail.length === 11 && !/^\d{11}$/.test(this.telOrEmail)) {
					this.inputError = '手机号必须为11位数字';
				}
			},
			validatePassword(event) {
				this.passwordError = '';
				if (!this.password) {
					this.passwordError = '密码不能为空';
				}
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			clearInput(event) {
				this.telOrEmail = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			clearPass(event) {
				if (event.detail.value.length > 0) {
					this.showPassIcon = true
				} else {
					this.showPassIcon = false
				}
			},
			clearIconUser() {
				this.telOrEmail = '';
				this.showClearIcon = false;
			},
			clearPassWord() {
				this.password = ''
				this.showPassIcon = false
			},
			clearCodeInput(event) {
				this.vercode = event.detail.value;
			},
			validateCode() {
				this.verCodeError = '';
				if (!this.vercode) {
					this.verCodeError = '验证码不能为空';
				}
			},
			// 登录
			async bandLogin() {
				this.validateInput();
				this.validatePassword();
				// this.validateCode()

				if (this.inputError || this.passwordError || this.verCodeError) return;

				const reqBody = {
					tel: this.telOrEmail,
					password: this.password,
					ajax: 1,
					isremember: 1,
				};
				try {
					const res = await sendRequest("/login/index", "POST", reqBody);
					console.log('登录', res);
					if (res.data.code == 0) {
						uni.setStorage({
							key: 'userToken',
							data: res.data.data.token,
							success() {
								uni.showToast({
									title: res.data.msg + '即将跳转到首页',
									icon: 'none',
								});
								// 存储成功后可以跳转至首页或其他需要登录状态的页面
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/index/index'
									});
								}, 1000);
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
						});
					}
				} catch (error) {
					console.error('登录失败:', error);
					uni.showToast({
						title: '登录失败，请检查您的凭据',
						icon: 'none'
					});
				}
			},
			bandJump(url) {
				uni.navigateTo({
					url: '/pages/users/' + url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		padding: 132rpx 86rpx 0 86rpx;

		.top {
			.title {
				font-size: 62rpx;
				font-family: Arial;
				font-weight: bold;
				color: #538af1;
			}

			.name {
				font-size: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #538af1;
				padding-top: 40rpx;
			}
		}

		.center {
			position: relative;
			padding-top: 60rpx;

			.input-box {
				// display: flex;
				padding: 28rpx 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				border-bottom: 2rpx solid #e5e5e5;
				font-weight: 400;
				color: #999999;

				.box-eye {
					display: flex;
					justify-content: space-between;

					.funBox {
						display: flex;
					}
				}

				.error {
					color: red;
					font-size: 24rpx
				}
			}

		}

		.buttomBgc {
			height: 88rpx;
			background: #538af1;
			border-radius: 8rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin-top: 24rpx;
		}

		.agreement {
			margin-top: 24rpx;

			.radio {
				font-size: 22rpx
			}
		}

		.underside {
			margin-top: 24rpx;

			.passWordFun {
				display: flex;
				justify-content: space-between;

				.register {}

				.forget {}
			}
		}
	}
</style>